<template>
  <div>
    <div class="top4">书架</div>

    <van-swipe-cell v-for="(item, index) in bookList" :key="index">
      <van-card
        :desc="item.author"
        :title="item.title"
        class="goods-card"
        :thumb="item.cover"
        @click="
          $router.push({
            path: '/bookxq',
            query: { id: item.id, cover: item.cover },
          })
        "
      />
      <template #right>
        <van-button
          square
          text="删除"
          @click="del(item.id)"
          type="danger"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>

    <!-- 底部组件 -->
    <buttom-nav></buttom-nav>
  </div>
</template>
<script>
import { Toast } from "vant";
import { mapState } from "vuex";
import buttomNav from "../components/base/buttomNav.vue";
import { shelf } from "../api/res";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // data1:"",
      xqid: "",
    };
  },
  methods: {
    ...mapActions({ deLBookList: "deLBookList" }),
    adddata() {
      // var data1 = JSON.parse(localStorage.getItem('addData'));
      // console.log(this.data1);
    },
    del(id) {
      this.deLBookList(id);
      let index =this.bookList.findIndex((item) =>{item.id==id})
      // this.bookList.splice(index,1)
      Toast("移除成功");
      console.log(index);
      console.log(id);
    },
  },
  computed: {
    ...mapState({ bookList: "bookList" }),
  },
  created() {
    shelf().then((data) => {
      console.log(data);
    });
    this.adddata();
    this.xqid = this.$route.query.id;
  },
  components: {
    buttomNav,
  },
};
</script>

<style lang="less">
.top4 {
  font-size: 20px;
  font-weight: bold;
  margin-left: 20px;
  margin-top: 15px;
  .icon-mulu {
    font-size: 20px;
    float: right;
    margin-top: 4px;
    margin-right: 20px;
  }
}
.van-swipe-cell {
  .goods-card {
    margin: 0;
    background-color: white;
    .van-card__title {
      // height: 30px;
      font-size: 16px;
      line-height: 20px;
    }
    .van-image__img {
      width: 80px;
      height: 100px;
    }
  }

  .delete-button {
    height: 100%;
  }
}

.bookshelf {
  padding-bottom: 65px;
  margin-top: 20px;
  .shelfbox {
    //   border: 1px solid black;
    margin-top: 10px;
    display: flex;
    .shelfimg {
      width: 80px;
      height: 100px;
      // border: 1px solid black;
      margin-left: 20px;
      // background-image: url(../assets/imag/01.jpg);
      // background-size: cover;
    }
    .stext {
      margin-left: 10px;
      margin-top: 7px;
      .shelfname {
        font-size: 18px;
      }
      .shelfsped {
        font-size: 10px;
        color: #707070;
      }
      .shelfupdata {
        font-size: 10px;
        color: #707070;
      }
    }
  }
}
</style>